@import '../var';

.pane {
  background-color: $background;
  border-radius: 5px;
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    &.is-#{$name} {
      .pane-heading {
        color: $color-invert;
        background-color: $color;
      }
    }
  }
}

.pane-heading {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.5em 0.75em;
  border-radius: 4px 4px 0 0;

  .pane-title {
    font-weight: 600;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    i {
      font-weight: normal;
      margin-right: 0.25em;
    }
    margin-right: 3em;
  }

  .pane-tool {
    display: flex;
    flex-direction: row;
    i {
      margin-top: -0.2em;
      margin-left: 0.3em;
      cursor: pointer;
      border-radius: 0.7em;
      padding: 0.2em;
      &:hover {
        background-color: rgba(0, 0, 0, 10%);
      }
      &.mas-icon-add:hover {
        color: $primary;
        background-color: $primary-light;
      }
      &.mas-icon-close:hover {
        color: $danger;
        background-color: $danger-light;
      }
    }
  }
}

.pane-block {
  padding: 0.5em 0.75em;
  > .row:not(:last-child) {
    margin-bottom: 0.5em;
  }
}

.pane-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0.5em 0.75em;
  > button:not(:last-child) {
    margin-right: 0.4em;
  }

  .pane-tool {
    display: flex;
    flex-direction: row;
    > button:not(:last-child) {
      margin-right: 0.4em;
    }
  }

  &.is-center {
    justify-content: center;
  }

  &.is-left {
    justify-content: flex-start;
  }
  &.is-space {
    justify-content: space-between;
  }
}
